import GameControl from "./GameControl"
class Snack {
  // 表示蛇头的元素
  head: HTMLElement

  // 表示 蛇的身体（包括蛇头）
  bodies: HTMLCollection

  //获取蛇的容器
  element: HTMLElement

  constructor() {
    this.element = document.getElementById('snack')!
    this.head = document.querySelector('#snack > div')!
    this.bodies = this.element.getElementsByTagName('div')
  }

  // 获取蛇的坐标（蛇头坐标）
  get X() {
    return this.head.offsetLeft
  }
  get Y() {
    return this.head.offsetTop
  }

  // 
  set X(value: number) {
    if (this.X === value) {
      return
    }

    // X值的合法范围0~290之间
    if (value < 0 || value > 290) {
      // 进入判断说明蛇撞墙
      throw new Error('蛇撞墙了')
    }

    // 修改X时，是在修改水平坐标，蛇在左右移动。蛇在向左移动时，不能向右掉头，反之亦然
    if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
      console.log('水平方向发生掉头了')
      // 发生了掉头，让蛇继续原方向移动
      console.log(value)
      if (value > this.X) {
        // 如果新值value大于旧值，说明蛇在向右走，此时发生掉头，应该让蛇继续向左走
        value = this.X - 10
      } else {
        value = this.X + 10
      }
    }

    // 移动身体
    this.moveBody()

    this.head.style.left = value + 'px '

    // 检查有没有撞到自己
    this.checkHeadBody()

  }
  set Y(value: number) {
    if (this.Y === value) {
      return
    }

    if (value < 0 || value > 290) {
      // 进入判断说明蛇撞墙
      throw new Error('蛇撞墙了')
    }

    // 修改Y时，是在修改垂直坐标，蛇在上下移动。蛇在向下移动时，不能向上掉头，反之亦然
    if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
      console.log(value)
      if (value > this.Y) {
        value = this.Y - 10
      } else {
        value = this.Y + 10
      }
    }

    // 移动身体
    this.moveBody()

    this.head.style.top = value + 'px '

    // 检查有没有撞到自己
    this.checkHeadBody()

  }

  // 设置蛇增加身体的方法
  addBody() {
    this.element.insertAdjacentHTML('beforeend', '<div></div>')
  }

  // 添加一个蛇身体移动方法
  moveBody() {
    /**
     * 将后边的身体设置为前边身体的位置（从后往前改）
     *    举例：
     *        第四节身体 = 第三节身体的位置
     *        第三节身体 = 第二节身体的位置
     *        第二节身体 = 第一节身体的位置
     */
    // 遍历获取所有身体位置
    for (let i = this.bodies.length - 1; i > 0; i--) {
      // 获取前边身体的位置
      let X = (this.bodies[i - 1] as HTMLElement).offsetLeft
      let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;

      // 将值设置到当前身体上
      (this.bodies[i] as HTMLElement).style.left = X + 'px';
      (this.bodies[i] as HTMLElement).style.top = Y + 'px'
    }
  }

  // 检查蛇头部与身体是否相撞
  checkHeadBody() {
    // 获取所有的身体，检查其是否与蛇头坐标发生重叠
    for (let i = 1; i < this.bodies.length; i++) {
      let bd = this.bodies[i] as HTMLElement
      if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) {
        // 说明蛇头撞到身体
        throw new Error('撞到自己了~~~')
      }
    }
  }

}


export default Snack
